<template>
  <el-dialog
    v-el-drag-dialog
    :title="$t('提示')"
    :visible="visible"
    width="280px"
    @update:visible="updateVisible">
    <p class="text">
      {{ text }}
    </p>
    <div slot="footer" class="dialog-footer">
      <bs-confirm-button-icon
        size="mini"
        @click.native="btnClick(1)"
        :text="$t('删除')" />
      <bs-confirm-button-icon
        size="mini"
        @click.native="btnClick(2)"
        :text="$t('移除')" />
      <bs-cancel-button-icon size="mini" @click.native="cancelClick" />
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  directives: {
    elDragDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    },
    file: {
      required: true
    }
  },
  data() {
    return {

    }
  },
  watch: {

  },
  computed: {

  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    btnClick(index) {
      switch(index) {
        case 1:
          this.$emit('del', this.file)
          break
        case 2:
          this.$emit('remove', this.file)
          break
        default:
      }
      this.updateVisible(false)
    },
    cancelClick() {
      this.updateVisible(false)
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
.tips-text {
  text-align: center;
}
.text {
  text-align: center;
  margin: 30px 0;
}
</style>
